<% layout('layout/layout') %>
<% block('header').append(`<style>
.ul_img_list {
    list-style:none;
    width:100%;
    display:block;
    margin-top:6px;
    padding:0;
}
.ul_img_list .mall_img {
    width:78px;
    height:78px;
    float:left;
    border:1px solid #e5e5e5;
}
.ul_img_list .mall_img.current{
    border:1px solid #59b210;
}
.ul_img_list .mall_img + .mall_img{
  margin-left:6px;
}
.tab-pane img {
    max-width:100%;
}
</style>`) %>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li><a href="/goods/index">产品展示</a></li>
        <li>商品详情</li>
        <li class="active"><%= title %></li>
    </ol>
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6" style="width:360px;min-width:360px;">
                    <div id="imgShowWrap" data-imgs="<%=goods.imgs.join(',') %>" style="width:100%;background:#FFF;">
                        <div class="img_main" style="width:330px;height:330px;border:1px solid #e5e5e5;"></div>
                        <div class="img_small">
                            <ul class="ul_img_list clearfix"></ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 product_info_block">
                    <div class="product_info">
                        <h1 class="product_name fs20"><%=goods.name %></h1>
                    </div>
                    <div class="product_desc margin-top15">
                        <p class="fs14"><%=goods.subName%></p>
                    </div>
                    <div class="product_price">
                        <p class="fs14">
                            价格：<span class="fs20  text-primary">￥<%=goods.sellPriceStr%></span>
                            <del class="padding-left20" style="color:#989898;">原价:￥<%=goods.virPrice %> </del>
                        </p>
                    </div>
                    <div class="product_stock margin-top">
                        <p class="fs14">库存：<%=goods.stock%></p>
                    </div>
                    <div class="product_num margin-top20">
                        <form id="form" action="/order/index" method="post" >
                            <input name="id" type="hidden" value="<%=goods._id%>">
                            <div id="spinner">
                                <input name="num"  type="text" >
                            </div>
                            <input name="status" type="hidden" value="buy">
                        </form>
                    </div>
                    <div class="product_btn margin-top20">
                        <% if (goods.stock && goods.stock > 0){  %>
                            <button id="buy" class="btn btn-plain btn-lg btn-default" >立即购买</button>
                            <button id="addCart" class="btn btn-plain btn-lg btn-primary margin-left" >
                                <i class="iconfont icon-cart fs16"></i> 加入购物车</button>
                        <% } else { %>
                            <button disabled class="btn btn-plain btn-lg btn-warning margin-left" >
                                <i class="iconfont icon-info cfs16"></i>已售罄</button>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9 col-xs-9">
            <div class="margin-top20" style="border:1px solid #e5e5e5;">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">商品详情</a></li>
                    <!--<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">评论</a></li>-->
                </ul>
                <!-- Tab panes -->
                <div class="tab-content" style="background:#FFF;">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="padding">
                          <%- goods.content %>
                        </div>
                    </div>
                    <!--<div role="tabpanel" class="tab-pane" id="profile">...</div>-->
                </div>

            </div>
        </div>
        <div class="col-md-3 col-xs-3 sidebar padding-top20">
            <% include ../navbar/hotGoodsNav %>
        </div>
    </div>
</div>
<% block('footer').append(`<script src="/js/spinner.js?v=0811" ></script>`); %>
<% block('footer').append(`<script>
jQuery(function () {
	var isLogin = ${user?true:false}
	$("#spinner").Spinner()
	$('#buy').on('click', function() {
      if(!isLogin) return $.Toast('您还没有登录','warning')
      $('#form').submit()
	})
	$('#addCart').on('click', function() {
		if(!isLogin) return $.Toast('您还没有登录','warning')
        $.post('/add2Cart', $('#form').serialize()).done(function(res){
          console.log(res)
          if (res.code === 0) {
            var num = res.data.cart.reduce(function(before,item){
              return before + item.goodsNum
            }, 0)
            $('#cartBadge').triggerHandler('change.cartBadge',[num])
            $.Toast('添加成功','success')
          } else {
            $.Toast(res.message || '','warning')
          }
        })
	})

    var $imgShowWrap = $('#imgShowWrap')
    var $imgMain = $('.img_main', $imgShowWrap)
    var $ulImgList = $('.ul_img_list',$imgShowWrap)
    function init(arr) {
        var doc = document.createDocumentFragment()
        var firstUrl
        arr.forEach(function(item, index){
          if(index === 0) {
            firstUrl = item.replace(/_\\$sma_[^\\.]+/,'')
          }
          var $li = $('<li class="mall_img" data-url="'+item+'" ></li>')
          $li.css({'background':'url('+item+') no-repeat center','background-size': 'cover'})
          doc.appendChild($li[0])
        })
        $imgMain.css({'background':'url('+firstUrl+') no-repeat center','background-size': 'cover'})
        $ulImgList.append(doc)
        $ulImgList.on('mouseover','li',(function(){
          var time
          return function(){
            var $this= $(this)
            clearTimeout(time)
            time = setTimeout(function() {
                    var url = $this.data('url')
                    url = url.replace(/_\\$sma_[^\\.]+/,'')
                    console.log(url,'img')
                    $this.addClass('current').siblings().removeClass('current')
                    $imgMain.css({'background':'url('+url+') no-repeat center','background-size': 'cover'})
              },300)
          }
        })())
    }
    init($imgShowWrap.data('imgs').split(','))
})
</script>`) %>